<template>
    <div class="container p-5 shadow mt-5">
        <div class="form-group my-3">
            <label for="">用户名:</label>
            <input id="user" type="text" class="form-control" v-model="account.username" aria-describedby="helpId"
                placeholder="请输入用户名：">
        </div>
        <div class="form-group my-3">
            <label for="">密码:</label>
            <input id="pwd" type="text" class="form-control" v-model="account.pwd" aria-describedby="helpId" placeholder="请输入密码：">
        </div>
        <button type="button" class="btn btn-success mt-3 col-lg-12" @click="login">登录</button>
    </div>
</template>

<script setup>
import { ref, watch } from "vue"

const account = ref({
    username:'',
    pwd:''
})

 watch(account.value, (newValue, oldValue) => {
    // console.log(document.querySelector('#user'));
    // console.log('newValue.username=>',newValue.username);
    // console.log('newValue.pwd=>',newValue.pwd);
    console.log(newValue.username,newValue.pwd);
    login(newValue.username,newValue.pwd)
    
})


const login = (_user,_pwd) => {
    // console.log(_user);
    // console.log('1=>',_user);
    // console.log('2',_pwd);
    if (/^\D*$/.test(_user)) {
        if (/^.{6,10}$/.test(_pwd)) {
            alert('登录成功！')
        } else {
            alert('密码错误！')
        }
    } else {
        alert('账号错误！')
    }

}




</script>

<style lang="css" scoped>
.container {
    width: 400px;
}
</style>